﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>不落阁 - 文章专栏</title>
    <link rel="shortcut icon" href="/icon/favicon.png" type="image/x-icon">
    <!--Layui-->
    <link href="/layui/css/layui.css" rel="stylesheet" />
    <!--font-awesome-->
    <link href="/js/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <!--全局样式表-->
    <link href="/css/global.css" rel="stylesheet" />
    <!--本页样式表-->
    <link href="/css/article.css" rel="stylesheet" />
</head>
<body>
	<div id="workingArea">
	
    <!-- 导航 -->
    <nav class="blog-nav layui-header">
        <div class="blog-container">
            <!-- QQ互联登陆 -->
            <!--<a href="javascript:;" class="blog-user">-->
                <!--<i class="fa fa-qq"></i>-->
            <!--</a>-->
            <!--<a href="javascript:;" class="blog-user layui-hide">-->
                <!--<img src="../images/Absolutely.jpg" alt="Absolutely" title="Absolutely" />-->
            <!--</a>-->
            <!-- 不落阁 -->
            <a class="blog-logo" href="home.html">不落阁</a>
            <!-- 导航菜单 -->
            <ul class="layui-nav" lay-filter="nav">
                <li class="layui-nav-item">
                    <a href="home.html"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="article.html"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
                </li>
                <!-- <li class="layui-nav-item">
                    <a href="resource.html"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
                </li> -->
                <li class="layui-nav-item">
                    <a href="timeline.html"><i class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a>
                </li>
                <li class="layui-nav-item">
                    <a href="about.html"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
                </li>
            </ul>
            <!-- 手机和平板的导航开关 -->
            <a class="blog-navicon" href="javascript:;">
                <i class="fa fa-navicon"></i>
            </a>
        </div>
    </nav>
    <!-- 主体（一般只改变这里的内容） -->
    <div class="blog-body">
        <div class="blog-container">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="home.html" title="网站首页">网站首页</a>
                <a href="article.html">文章专栏</a>
                <a><cite id="tagName"></cite></a>
            </blockquote>
            <div class="blog-main">
                <div class="blog-main-left">
                    <!-- <div class="shadow" style="text-align:center;font-size:16px;padding:40px 15px;background:#fff;margin-bottom:15px;">
                        未搜索到与【<span style="color: #FF5722;">keywords</span>】有关的文章，随便看看吧！
                    </div> -->
                    
                    
                    <div id="flow">

                    </div>
                    
                </div>
                
                
                <div class="blog-main-right">
                    <div class="blog-search">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="search-keywords  shadow">
                                    <input type="text" name="keywords" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
                                </div>
                                <div class="search-submit  shadow">
                                    <a class="search-btn" lay-submit="formSearch" lay-filter="formSearch"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="blog-module shadow">
                        <div class="blog-module-title">标签</div>
                        <ul class="blogroll" id="tag">
                        </ul>
                    </div>
                    <!-- <div class="article-category shadow">
                        <div class="article-category-title">分类导航</div>
                        
                        <div id="typeList" class="typeList">
                        	
                        </div>
                        <div class="clear"></div>
                    </div> -->
                    <!-- <div class="blog-module shadow">
                        <div class="blog-module-title">作者推荐</div>
                        <ul class="fa-ul blog-module-ul">
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">Web安全之跨站请求伪造CSRF</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">ASP.NET MVC 防范跨站请求伪造（CSRF）</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">C#基础知识回顾-扩展方法</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">一步步制作时光轴（一）（HTML篇）</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">一步步制作时光轴（二）（CSS篇）</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">一步步制作时光轴（三）（JS篇）</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">写了个Win10风格快捷菜单！</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">ASP.NET MVC自定义错误页</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">ASP.NET MVC制作404跳转（非302和200）</a></li>
                            <li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html">基于laypage的layui扩展模块（pagesize.js）！</a></li>
                        </ul>
                    </div> -->
                    <div class="blog-module shadow">
                        <div class="blog-module-title">随便看看</div>
                        <ul id="justLook" class="fa-ul blog-module-ul">
                        
                        </ul>
                    </div>
                    <!--右边悬浮 平板或手机设备显示-->
                    <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <footer class="blog-footer">
        <p><span>Copyright</span><span>&copy;</span><span>2017</span><a href="http://www.lyblogs.cn">不落阁</a><span>Design By LY</span></p>
        <p><a href="http://www.miibeian.gov.cn/" target="_blank">蜀ICP备16029915号-1</a></p>
    </footer>
    <!--侧边导航-->
    <ul class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide" lay-filter="nav">
        <li class="layui-nav-item">
            <a href="home.html"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
        </li>
        <li class="layui-nav-item layui-this">
            <a href="article.html"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
        </li>
        <li class="layui-nav-item">
            <a href="resource.html"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
        </li>
        <li class="layui-nav-item">
            <a href="timeline.html"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
        </li>
        <li class="layui-nav-item">
            <a href="about.html"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
        </li>
    </ul>
    <!--分享窗体-->
    <div class="blog-share layui-hide">
        <div class="blog-share-body">
            <div style="width: 200px;height:100%;">
                <div class="bdsharebuttonbox">
                    <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                    <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                    <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                    <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                </div>
            </div>
        </div>
    </div>
    <!--遮罩-->
    <div class="blog-mask animated layui-hide"></div>
    
    </div>
    <!-- layui.js -->
    <script src="/layui/layui.js"></script>
    <!-- 全局脚本 -->
    <script src="/js/forepage/global.js"></script>
    
    <script type="text/javascript" src="/js/moment/2.22.2/moment.js"></script>
    <script type="text/javascript" src="/js/axios/0.17.1/axios.min.js"></script>
    <script type="text/javascript" src="/js/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="/js/vue/2.5.16/vue.min.js"></script>
    
    <script type="text/javascript">
    
    $(function () {
    	
    	//随便看看
    	axios.get("/personal_blog/blogs").then(function(res){
    		var beans = res.data;
    		var justLook = $("#justLook");
    		var look = '';
    		for(var i = 0 ;i < 7;i++){
    			var j = Math.floor(Math.random()*beans.length);
    			var bean = beans[j];
    			look = $('<li><i class="fa-li fa fa-hand-o-right"></i><a href="detail.html?id='+bean.id+'">'+bean.title+'</a></li>')
    			$(justLook).append(look);
    		}
    		//$("#justLook").trigger("create");
    	})
    	
    	//文章类别列表
   	/* 	axios.get("/personal_blog/blogTypesAll").then(function(res){
   			var data = res.data;
   			var aArr = '';
   			var a = $(".article-category-title");
   			for(var i in data){
   				aArr = $('<a href="/personal_blog/article?typeId='+data[i].id+'&typeName='+data[i].typeName+'">'+data[i].typeName+'</a>');
   				a.after(aArr);
   				a = aArr;
   			}
   		})
   		 */
 		//标签
	   axios.get("/personal_blog/tags").then(function(res){
	   	var beans = res.data;
	   	for(var i in beans){
	   		var li = $("<li style='padding:1px 2px;display:inline-block'></li>");
	    	var a = $('<a  title="数量：'+beans[i].blogNum+'"  href="tag.html?tagId='+beans[i].id+'&tagName='+beans[i].tagName+'" style="font-size:13px;padding:2px 4px;background-color:#009688;border-radius:2px;color:white;font-weight:bold" >'+beans[i].tagName+'</a>');
	    	li.append(a);
	    	$("#tag").append(li);
	   	}
	   })
   		
   		
   		
   		var tagId = getUrlParms("tagId");
    	var tagName = getUrlParms("tagName");
    	
   		var pageSize = 10;
   	    var pageIndex = 0;
    	var url = '';
   	    
   		//layui实现流加载博客列表
   	    layui.use('flow', function () {
   	        var $ = layui.jquery;
   	        var flow = layui.flow;
   	        flow.load({
   	            elem: '#flow',//存放每条数据的容器
   	            done: function (pageIndex, next) { //到达临界点（默认滚动触发），触发下一页
   	            	
       				url = '/personal_blog/blogs/listByPageAndTagId?page='+pageIndex+"&limit="+pageSize+"&tagId="+tagId;
        			$("#tagName").html("标签 "+tagName);
   	        		
   	                var lis = [];
   	                $.get(url, function(res){
   	                    layui.each(res.data, function(index, item){
   	                        var divArticle = '<div class="article shadow">';
                  		  	divArticle+='<div class="article-left" style="width:180px;height:100px">';
                       		divArticle+='<img src="'+item.newsFaceImg+'" alt="基于laypage的layui扩展模块（pagesize.js）！" style="width:100%;height:100%" />';
   	                        divArticle+='</div>';
   	                        divArticle+='<div class="article-right">';
   	                        divArticle+='<div class="article-title">';
   	                        divArticle+='<a href="detail.html?id='+item.id+'">';
   	                        divArticle+=item.title;
   	                        divArticle+='</a>';
   	                        divArticle+='</div>';
   	                        divArticle+='<div class="article-abstract">';
   	                        divArticle+=item.summary;
   	                        divArticle+='</div>';
   	                        divArticle+='</div>';
   	                        divArticle+='<div class="clear"></div>';
   	                        divArticle+='<div class="article-footer">';
   	                        var time = moment(item.releaseDate).format('YYYY-MM-DD HH:mm:ss').substring(0,10);
   	                        divArticle+='<span><i class="fa fa-clock-o"></i>&nbsp;&nbsp;'+time+'</span>';
   	                        divArticle+='<span class="article-author"><i class="fa fa-user"></i>&nbsp;&nbsp;'+item.newsAuthor+'</span>';
   	                        divArticle+='<span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a href="/personal_blog/article?typeId='+item.typeId+'&typeName='+item.typeName+'">'+item.typeName+'</a></span>';
   	                   		divArticle+='<span><i class="fa fa-hashtag"></i>&nbsp;&nbsp;';
	   	                   	var tagList = item.tagList;
	                        for(var j in tagList){
	                        	divArticle += '<a href="tag.html?tagId='+tagList[j].id+'&tagName='+tagList[j].tagName+'" style="padding:2px 4px;background-color:#009688;border-radius:2px;color:white;font-weight:bold">'+tagList[j].tagName+'</a>&nbsp;';
	                        }
	                        divArticle += '</span>';
   	                        divArticle+='<span class="article-viewinfo"><i class="fa fa-eye"></i>&nbsp;'+item.clickHit+'</span>';
   	                        divArticle+='<span class="article-viewinfo"><i class="fa fa-commenting"></i>&nbsp;'+item.replyHit+'</span>';
   	                        divArticle+='</div></div>';
   	                        lis.push(divArticle);
   	                    });
   	                    next(lis.join(''), pageIndex < res.pages);
   	                })
   	            }
   	        });
   	    });
            
    })
    
    
    
    function getUrlParms(para){
        var search=location.search; //页面URL的查询部分字符串
        var arrPara=new Array(); //参数数组。数组单项为包含参数名和参数值的字符串，如“para=value”
        var arrVal=new Array(); //参数值数组。用于存储查找到的参数值

        if(search!=""){
            var index=0;
            search=search.substr(1); //去除开头的“?”
            arrPara=search.split("&");

            for(i in arrPara){
                var paraPre=para+"="; //参数前缀。即参数名+“=”，如“para=”
                if(arrPara[i].indexOf(paraPre)==0&& paraPre.length<arrPara[i].length){
                    arrVal[index]=decodeURI(arrPara[i].substr(paraPre.length)); //顺带URI解码避免出现乱码
                    index++;
                }
            }
        }

        if(arrVal.length==1){
            return arrVal[0];
        }else if(arrVal.length==0){
            return null;
        }else{
            return arrVal;
        }
    }
    
    
   
    
    </script>
    
    
    
</body>
</html>